<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script>
        // 利用方块画身体；
        // 定义一个方块类 生产方块
        let containerEle = document.querySelector(".container");
        function Rect(x, y, color) {
            // 方块的x坐标
            this.x = x;
            this.y = y; //方块的y坐标
            this.color = color;  //方块的颜色 
            this.createRect(); //生成方块的方法
        }

        Rect.prototype.createRect = function () {
            this.rectEle = document.createElement("div"); // 创建元素 和方块对象的rectEle绑定
            this.rectEle.style.width = "50px";
            this.rectEle.style.height = "50px";
            this.rectEle.style.position = "absolute";
            this.rectEle.style.left = this.x + "px";
            this.rectEle.style.top = this.y + "px";
            this.rectEle.style.background = this.color;  // 设置方块的颜色
            this.rectEle.style.border = "1px solid";
        }

         //创建食物
         function Food(container){
            this.container = container;
            this.x = 0;
            this.y = 0;
        }
        Food.prototype.createFood = function(){
            this.x = randomNum(0,550);
            this.y = randomNum(0,550);
            let rect = new Rect(this.x,this.y,"yellow");
            this.rect = rect;
            this.container.appendChild(rect.rectEle);
        }
        Food.prototype.removeFood = function(){
            this.rect.rectEle.remove();
        }



        let food = new Food(containerEle);

        food.createFood();



        // let rect1 = new Rect(0,0,"blue");
        // let rect2 = new Rect(50,0,"blue");
        // console.log(rect1);
        // let containerEle = document.querySelector(".container");
        // containerEle.appendChild(rect1.rectEle);
        // containerEle.appendChild(rect2.rectEle);

        // 创建蛇类；
        function Snake(containerEle) {
            this.containerEle = containerEle; // 容器 蛇的身体应该放在哪个容器里面 我们这里就是dom中的container
            this.body = [];  //蛇的身体  ，由多少个rect构成的；
            this.createBody(); //创建蛇的身体 创建完成后this.body里就有内容了；
            console.log(this.body);
            this.renderDom();  //把每一个 rect中的rectEle元素 添加到 dom中；
            this.dir = "right";
            this.isDie = false;
        }

        Snake.prototype.createBody = function () {
            for (let i = 0; i < 5; i++) {  //循环生成方块组成蛇的身体
                let rect;
                if (i == 4) {
                    rect = new Rect(i * 50, 0, "red"); //如果是蛇头设置颜色为红色
                } else {
                    rect = new Rect(i * 50, 0, "blue");  //蛇身体设置颜色蓝色
                }

                this.body.push(rect);  //把蛇身体加到body数组中
            }
        }

        // 蛇动起来 
        Snake.prototype.move = function () {
            // 移动蛇头 移动一格  ，在原来蛇头的位置加上一个蓝色方块； 把最后一个方块删除掉；
            // 蛇头现在的x轴的位置；
            var leftNum = parseInt(this.body[this.body.length - 1].rectEle.style.left);
            var topNum = parseInt(this.body[this.body.length - 1].rectEle.style.top);
            console.log(leftNum);
            switch (this.dir) {
                case 'right':
                    this.body[this.body.length - 1].rectEle.style.left = leftNum + 50 + "px";
                    break;
                case 'left':
                    this.body[this.body.length - 1].rectEle.style.left = leftNum - 50 + "px";
                    break;
                case 'up':
                    this.body[this.body.length - 1].rectEle.style.top = topNum - 50 + "px";
                    break;
                case 'down':
                    // console.log(topNum);
                    this.body[this.body.length - 1].rectEle.style.top = topNum + 50 + "px";
                    break;
            }
            // if (leftNum == 500) {
            //     this.isDie = true;
            // }
            // 检测蛇头和food的碰撞；
            let head = this.body[this.body.length-1];

            let AminX = head.rectEle.offsetLeft;
            let AmaxX = AminX + head.rectEle.offsetWidth;

            let AminY = head.rectEle.offsetTop;
            let AmaxY = AminY + head.rectEle.offsetHeight;

            let BminX=  food.rect.rectEle.offsetLeft;
            let BmaxX = food.rect.rectEle.offsetWidth + BminX;

            let BminY=  food.rect.rectEle.offsetTop;
            let BmaxY = food.rect.rectEle.offsetHeight + BminY;
            console.log(leftNum);
            let rect = new Rect(leftNum, topNum, "blue");
            //    console.log(this.length);
            this.body.splice(this.body.length - 1, 0, rect);
            if(AmaxX>BminX && AminX<BmaxX && AmaxY>BminY && AminY<BmaxY){
                console.log("碰了");
                food.removeFood();
                food.createFood();
            }else{
                 this.body[0].rectEle.remove();
                  this.body.shift();
            }


           

            //    console.log(this.body);

            // 删除最有一个元素，this.body里的对象也删除
            
            this.renderDom();



        }

        // 把蛇渲染到视图
        Snake.prototype.renderDom = function () {
            this.body.forEach(rect => {  //循环把蛇身体中的rectEle添加到containerEle里面
                this.containerEle.appendChild(rect.rectEle);
            })
        }
       
        let snake = new Snake(containerEle);  //实例化调用蛇类；同时也实例化了 rect
        document.onkeydown = function (e) {
            var key = e.key;
            console.log(key);
            switch (key) {
                case 'ArrowLeft':
                    if (snake.dir != "right") {
                        snake.dir = "left"
                    }
                    break;
                case 'ArrowRight':
                    snake.dir = "right"
                    break;
                case 'ArrowUp':
                    snake.dir = "up"
                    break;
                case 'ArrowDown':
                    snake.dir = "down"
                    break;
            }
        }


        var timer = setInterval(() => {
            console.log(snake.isDie);
            if (snake.isDie) {
                clearInterval(timer);
            }
            snake.move();

        }, 500);




       


        function randomNum(min,max){
            return parseInt( Math.random()*(max+1-min))+min;
        }

    </script>
</body>

</html>